<!-- 功能：添加设备弹窗 | 作者：menghao.yan | 邮箱：yxs2615@163.com | 时间：2023年08月21日 22:59:06 -->
<template>
  <!-- 弹出框 -->
  <a-modal v-model:open="visible" title="添加设备" width="500px" class="y-modal" okText="创建" @ok="onSubmit" @cancel="onCancel">
    <a-form :label-col="{ span: 6 }" :wrapper-col="{span: 14}">
      <a-form-item label="设备名称" v-bind="validateInfos.sheBeiMingCheng">
        <a-row :gutter="12">
          <a-col flex="auto">
            <a-input v-model:value="modelRef.sheBeiMingCheng" placeholder="请输入设备名称" readonly></a-input>
          </a-col>
          <a-col flex="20px">
            <a-button type="link" class="y-btn" @click="openXuanZeSheBeiModal">选择设备</a-button>
          </a-col>
        </a-row>
      </a-form-item>
      <a-form-item label="写入模式" v-bind="validateInfos.xieRuMoShi">
        <a-select v-model:value="modelRef.xieRuMoShi" placeholder="请选择写入模式">
          <a-select-option value="Write-Through">Write-Through</a-select-option>
          <a-select-option value="rite-Back">Write-Back</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="Target名称" v-bind="validateInfos.targetName">
        <a-select v-model:value="modelRef.targetName" placeholder="请选择Target名称">
          <a-select-option value="quanBu">全部</a-select-option>
          <a-select-option value="target1">target1</a-select-option>
          <a-select-option value="target2">target2</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="只读" v-bind="validateInfos.zhiDu">
        <a-checkbox v-model:checked="modelRef.zhiDu"></a-checkbox>
      </a-form-item>
      <a-form-item label="是否创建Cache" v-bind="validateInfos.shiFouChuangJianCache">
        <a-checkbox v-model:checked="modelRef.shiFouChuangJianCache"></a-checkbox>
      </a-form-item>

      <template v-if="modelRef.shiFouChuangJianCache">
        <a-form-item label="选择缓存盘" v-bind="validateInfos.xuanZeHuanCunPan">
          <a-select v-model:value="modelRef.xuanZeHuanCunPan" placeholder="请选择缓存盘">
            <a-select-option value="p1">盘1</a-select-option>
            <a-select-option value="p2">盘2</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="元数据大小" v-bind="validateInfos.yuanShuJuDaXiao">
          <a-row :gutter="12">
            <a-col flex="auto">
              <a-input v-model:value="modelRef.yuanShuJuDaXiao" placeholder="请输入元数据大小" />
            </a-col>
            <a-col flex="20px">
              <a-select v-model:value="modelRef.yuanShuJuDaXiaoDanWei" placeholder="请选择元数据大小单位">
                <a-select-option value="MiB">MiB</a-select-option>
                <a-select-option value="GiB">GiB</a-select-option>
                <a-select-option value="MiB">MiB</a-select-option>
              </a-select>
            </a-col>
          </a-row>
        </a-form-item>
        <a-form-item label="缓存大小" v-bind="validateInfos.huanCunDaXiao">
          <a-row :gutter="12">
            <a-col flex="auto">
              <a-input v-model:value="modelRef.huanCunDaXiao" placeholder="请输入缓存大小" />
            </a-col>
            <a-col flex="20px">
              <a-select v-model:value="modelRef.huanCunDaXiaoDanWei" placeholder="请选择缓存大小单位">
                <a-select-option value="MiB">MiB</a-select-option>
                <a-select-option value="GiB">GiB</a-select-option>
                <a-select-option value="MiB">MiB</a-select-option>
              </a-select>
            </a-col>
          </a-row>
        </a-form-item>
      </template>
    </a-form>
  </a-modal>

  <a-modal v-model:open="visibleXuanZeSheBeiModal" title="选择设备" width="600px" class="y-modal" okText="确定" @ok="onSubmitXuanZeSheBei" @cancel="onCancelXuanZeSheBei">
    <a-card>
      <a-row align="middle" justify="end">
        <a-space>
          <span>磁盘设备类型</span>
          <a-select v-model:value="searchValueSheBeiLeiXing" placeholder="请选择磁盘设备类型">
            <a-select-option value="LUN">LUN</a-select-option>
            <a-select-option value="RAID">RAID</a-select-option>
          </a-select>
          <a-input v-model:value="searchValueSheBei">
            <template #addonBefore>
              <search-outlined /> 搜索:
            </template>
          </a-input>
        </a-space>
      </a-row>
      <a-table bordered :data-source="dataSourceSheBei" :columns="columnsSheBei" class="y-table" :pagination="paginationSheBei"
               :row-selection="{ selectedRowKeys: state.selectedRowKeys, onChange: onSelectChange }"> </a-table>
    </a-card>
  </a-modal>
</template>

<script setup>
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  }
})

const { visible } = toRefs(props)

// 定义组件的事件
const emits = defineEmits(['update:visible'])

import { Form } from 'ant-design-vue'

const useForm = Form.useForm

const modelRef = reactive({
  sheBeiMingCheng: '1',
  xieRuMoShi: 'rite-Back',
  targetName: 'quanBu',
  zhiDu: false,
  shiFouChuangJianCache: false,
  xuanZeHuanCunPan: '',
  yuanShuJuDaXiao: '',
  yuanShuJuDaXiaoDanWei: 'GiB',
  huanCunDaXiao: '',
  huanCunDaXiaoDanWei: 'GiB'
})

const rulesRef = reactive({
  sheBeiMingCheng: [{ required: true, message: '请选择设备' }],
  xieRuMoShi: [{ required: true, message: '请选择写入模式' }],
  targetName: [{ required: true, message: '请选择Target名称' }],
  zhiDu: [{ required: true, message: '请选择是否只读' }],
  shiFouChuangJianCache: [{ required: true, message: '请选择是否创建Cache' }],
  xuanZeHuanCunPan: [{ required: true, message: '请选择缓存盘' }],
  yuanShuJuDaXiao: [{ required: true, message: '请输入元数据大小' }],
  yuanShuJuDaXiaoDanWei: [{ required: true, message: '请选择元数据大小单位' }],
  huanCunDaXiao: [{ required: true, message: '请输入缓存大小' }],
  huanCunDaXiaoDanWei: [{ required: true, message: '请选择缓存大小单位' }]
})

const { resetFields, validate, validateInfos, mergeValidateInfo } = useForm(modelRef, rulesRef)
const onSubmit = () => {
  validate()
    .then(() => {
      console.log('添加设别>>', toRaw(modelRef))
      onCancel()
    })
    .catch(err => {
      console.log('error', err)
    })
}

const onCancel = () => {
  // 触发自定义事件来通知父组件关闭弹窗
  emits('update:visible', false)
}

// -- 选择设备
const visibleXuanZeSheBeiModal = ref(false)

const openXuanZeSheBeiModal = () => {
  visibleXuanZeSheBeiModal.value = true
}

const searchValueSheBei = ref('')
const searchValueSheBeiLeiXing = ref('LUN')

// 表格列
const columnsSheBei = ref([
  {
    title: '设备名',
    dataIndex: 'name',
    key: 'name',
    align: 'center',
    sorter: {
      compare: (a, b) => a.name.localeCompare(b.name),
      multiple: 1
    }
  },
  {
    title: '容量',
    dataIndex: 'rongLiang',
    key: 'rongLiang',
    align: 'center',
    sorter: {
      compare: (a, b) => a.rongLiang.localeCompare(b.rongLiang),
      multiple: 2
    }
  }
])

// 表格数据
const dataSourceSheBei = ref([
  {
    key: '1',
    name: '张三',
    rongLiang: '123'
  },
  {
    key: '2',
    name: '李四',
    rongLiang: '456'
  }
])

// 分页
const paginationSheBei = {
  current: 1,
  pageSize: 10,
  showQuickJumper: true,
  showSizeChanger: true,
  total: 0,
  showTotal: (total, range) => {
    return `${range[0]}-${range[1]} 共 ${total} 条数据`
  },
  onChange: (page, pageSize) => {
    console.log('IPSAN管理 >  Target > 添加Target 选择设备分页改变>>', page, pageSize)
  }
}
const state = reactive({
  selectedRowKeys: []
})
const onSelectChange = selectedRowKeys => {
  console.log('IPSAN管理 >  Target > 添加Target 选择设备多选改变', selectedRowKeys)
  state.selectedRowKeys = selectedRowKeys
}
const onSubmitXuanZeSheBei = () => {}

const onCancelXuanZeSheBei = () => {}
</script>

<style scoped>
.ant-row {
  margin-bottom: 10px;
}
.y-tianJiaTarget-title {
  font-weight: bold;
  font-size: 16px;
}
</style>